<template>
   <view class="u-wrap">
        <view class="u-menu-wrap">
            <scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
                <view v-for="(item,index) in classifyData" :key="index" class="u-tab-item" :class="[current==index ? 'u-tab-item-active' : '']"  
                    :data-current="index" @tap.stop="swichMenu(index)">
                    <text class="u-line-1">{{item.name}}</text>
                </view>
            </scroll-view>
            <template v-for="(item,index) in classifyData" :key="index">
            <scroll-view scroll-y  v-if="current==index" style="background-color: rgb(250, 250, 250);">
                <view  style="padding: 16rpx;">
                    <view class="class-item">
                            <view class="item-title">
                                <text>{{item.name}}</text>
                            </view>
                            <view style="display: flex; flex-wrap: wrap;">
                                <view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1">
                                    <image class="item-menu-image" :src="item1.icon" mode=""></image>
                                    <view class="item-menu-name">{{item1.name}}</view>
                                </view>
                            </view>
                    </view>  
                </view>
            </scroll-view>
            </template>     
        </view>
   </view>
</template>
<script lang="ts" setup>
import classifyData from "@/common/classify.data.js"
import { ref } from "vue"
import { getCurrentInstance } from 'vue';

const instance = getCurrentInstance();

const scrollTop = ref(0) // tab标题的滚动条位置
const current = ref(0)  // 预设当前项的值
const menuHeight = ref(0) // 左边菜单的高度
const menuItemHeight = ref(0)  // 左边菜单item的高度


// 点击左边的栏目切换
async function swichMenu(index: number){
    if(index == current.value) return
    current.value = index 
    // 如果为0，意味着尚未初始化
    if(menuHeight.value == 0 || menuItemHeight.value == 0) {
        await getElRect('menu-scroll-view', menuHeight);
        await getElRect('u-tab-item', menuItemHeight);
    }
    // 将菜单菜单活动item垂直居中
	scrollTop.value = index * menuItemHeight.value + menuItemHeight.value / 2 - menuHeight.value / 2;

    console.log(scrollTop.value)
}

function getElRect(elClass: string, dataVal: any){
     new Promise((resolve, reject)=>{
        const query = uni.createSelectorQuery().in(instance?.proxy);
        const selector = "." + elClass
        const nodeObj = { size: true } // 是否返回节点尺寸（width height）
        query.select(selector).fields(nodeObj, (res:any) => {
         
         // 如果节点尚未生成，res值为null，循环调用执行
          if(!res){
				setTimeout(() => {
                    getElRect(elClass, dataVal);
                    console.log("getElRect(elClass, dataVal)")
                }, 100);
            return ;
          }
        dataVal.value = res.height;
        }).exec();
     })
}


</script>
<style lang="scss" scoped>
.u-wrap {
		height: calc(100vh);
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
		display: flex;
		flex-direction: column;
}

.u-menu-wrap {
    display: flex;
    flex: 1;
    overflow: hidden;
    height: 100%;
}

.u-tab-view {
    width: 200rpx;
    height: 100%;
    border: 1rpx solid #f2f5f9;
    background: #f6f6f6;
}

.u-tab-item {
    height: 110rpx;
    background: #f6f6f6;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26rpx;
    color: #444;
    font-weight: 400;
    line-height: 1;
}
	
.u-tab-item-active {
    position: relative;
    color: #000;
    font-size: 30rpx;
    font-weight: 600;
    background: #fff;
}

.u-tab-item-active::before {
    content: "";
    position: absolute;
    border-left: 4px solid #2979ff;
    height: 32rpx;
    left: 0;
    top: 39rpx;
}

.class-item {
    margin-bottom: 30rpx;
    background-color: #fff;
    padding: 16rpx;
    border-radius: 8rpx;
}

.item-title {
    font-size: 30rpx;
    color: #303133;
    font-weight: bold;
    margin: 10rpx 0;
}

.thumb-box {
    width: 33.333333%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 20rpx;
    margin-bottom: 10rpx;
}

.item-menu-image {
    width: 120rpx;
    height: 120rpx;
    border-radius: 100rpx;
}

.item-menu-name {
    font-weight: normal;
    font-size: 24rpx;
    color: #303133;
    margin-top: 20upx;
}

.u-line-1 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

</style>